<template>
  <!--size抽屉宽度（或高度）  default 378px 和 large 736px -->
  <a-drawer
      v-model:open="visible"
      ref="employeeDetailModalRef"
      class="edit-drawer modal-fixed-bottom"
      root-class-name="root-customer-drawer"
      width="800px"
      :closable="false"
      @close="onClose"
  >
    <div class="closeable" @click="onClose">{{ $t('self.closeButton') }}</div>
    <div class="modal-header">{{ title }}</div>
    <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol"
            @finish="onSubmit"
    >
      <a-form-item :label="$t('self.operators.tips34')" name="">
        <a-upload
            v-model:file-list="uploadParams.pic1"
            name="avatar"
            list-type="picture-card"
            class="uploader-wrapper1"
            :show-upload-list="true"
            :action="uploadParams.url"
            @change="handleUploadChange"
        >
          <div class="base-flex base-columns base-align-items-center base-justify-content-center" v-if="uploadParams.pic1.length < 1">
            <plus-outlined class="base-f20 gui-color-grey2" />
            <div class="ant-upload-text gui-color-grey base-mt10">Upload</div>
          </div>
        </a-upload>
        <div class="gui-color-grey2">{{ $t('self.operators.tips38') }}：1024px * 1024px</div>
      </a-form-item>

      <a-form-item :label="$t('self.operators.tips35')" name="">
        <a-upload
            v-model:file-list="uploadParams.pic2"
            name="avatar"
            list-type="picture-card"
            class="uploader-wrapper1"
            :show-upload-list="true"
            :action="uploadParams.url"
            @change="handleUploadChange"
        >
          <div class="base-flex base-columns base-align-items-center base-justify-content-center" v-if="uploadParams.pic2.length < 1">
            <plus-outlined class="base-f20 gui-color-grey2" />
            <div class="ant-upload-text gui-color-grey base-mt10">Upload</div>
          </div>
        </a-upload>
      </a-form-item>

      <a-form-item :label="$t('self.operators.tips36')" name="">
        <a-upload
            v-model:file-list="uploadParams.pic3"
            name="avatar"
            list-type="picture-card"
            class="uploader-wrapper1"
            :show-upload-list="true"
            :action="uploadParams.url"
            @change="handleUploadChange"
        >
          <div class="base-flex base-columns base-align-items-center base-justify-content-center">
            <plus-outlined class="base-f20 gui-color-grey2" />
            <div class="ant-upload-text gui-color-grey base-mt10">Upload</div>
          </div>
        </a-upload>
        <div class="gui-color-grey2">{{ $t('self.operators.tips38') }}：1024px * 80px</div>
      </a-form-item>

      <a-form-item :label="$t('self.operators.tips37')" name="">
        <a-upload
            v-model:file-list="uploadParams.pic4"
            name="avatar"
            list-type="picture-card"
            class="uploader-wrapper1"
            :show-upload-list="true"
            :action="uploadParams.url"
            @change="handleUploadChange"
        >
          <div class="base-flex base-columns base-align-items-center base-justify-content-center">
            <plus-outlined class="base-f20 gui-color-grey2" />
            <div class="ant-upload-text gui-color-grey base-mt10">Upload</div>
          </div>
        </a-upload>
        <div class="gui-color-grey2">{{ $t('self.operators.tips38') }}：667px * 232px</div>
      </a-form-item>


      <div class="base-flex base-rows base-align-items-center base-justify-content-center footer">
        <a-button type="primary" html-type="submit">{{ $t('self.submitButton') }}</a-button>
        <a-button class="base-ml10" @click="onClose">{{ $t('self.cancelButton') }}</a-button>
      </div>

    </a-form>

  </a-drawer>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref } from 'vue'
import { message } from 'ant-design-vue'
import SImage from '@/components/s-image.vue'
const { proxy } = getCurrentInstance()
const $TOOL = proxy.$TOOL
const $T = proxy.$t
const emit = defineEmits(['close','ok'])

const visible = ref(false)
// 模式，add新增，show查看，edit编辑
const mode = ref('add')
const detail = ref({})
const labelCol = {
  style: {
    width: '230px',
  },
};
const wrapperCol = {
  span: 16,
};
const title = ref($T('self.operators.modal.title3'))
const uploadParams = ref({
  url: '',
  header: {

  },
  pic1: [], // logo
  pic2: [], // 分享图
  pic3: [], // banner图，因为需要固定的id,url的格式，所以这里也要重新赋值
  pic4: []  // 侧边banner图
})
const formState = ref({
  "logo": "",// logo
  "banner": [], // banner图
  "leftBanner": [], // 侧边banner
  "shareMap": "", // 分享图
  "orgId": 0
})

onMounted(() => {

})

const handleUploadChange = (info) => {
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      message.success(`${info.file.name} file uploaded successfully`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
}
const onSubmit = (values) => {
  console.log(formState.value)
  console.log('submit!', values);
};

const onReset = () => {

}

const onClose = () => {
  // 清空内容
  formState.value = {
    "logo": "",// logo
    "banner": [], // banner图
    "leftBanner": [], // 侧边banner
    "shareMap": "", // 分享图
    "orgId": 0
  }
  // 恢复列表
  uploadParams.value.pic1 = []
  uploadParams.value.pic2 = []
  uploadParams.value.pic3 = []
  uploadParams.value.pic4 = []
  visible.value = false
  emit('close')
}

const edit = (record) => {
  mode.value = 'edit'
  visible.value = true
  // formState.value = record
  formState.value = {
    "logo": "https://admin.gzruisu.com/file/api_img/1/106.png",// logo
    "banner": ["https://admin.gzruisu.com/file/api_img/1/105.png", "https://admin.gzruisu.com/file/api_img/1/101.png"], // banner图
    "leftBanner": ["https://admin.gzruisu.com/file/api_img/1/105.png"], // 侧边banner
    "shareMap": "https://admin.gzruisu.com/file/api_img/1/105.png", // 分享图
    "orgId": 1
  }
  // logo / 分享图 是单张，重新赋值
  uploadParams.value.pic1 = [{id:1, url:formState.value.logo}]
  uploadParams.value.pic2 = [{id:1, url:formState.value.shareMap}]

  // banner图
  let banners = [ ...formState.value.banner ]
  banners = banners.map((url, index) => ({
    id: index + 1, // 自增的 ID
    url: url      // URL
  }))
  uploadParams.value.pic3 = banners

  // 侧边banner图
  let leftBanners = [ ...formState.value.leftBanner ]
  leftBanners = leftBanners.map((url, index) => ({
    id: index + 1, // 自增的 ID
    url: url      // URL
  }))
  uploadParams.value.pic4 = leftBanners

  // detail.value = record
  // $TOOL.array.cloneExistKey(formState.value, detail.value)
  // console.log(formState.value)
}

// 子组件中要通过defineExpose将方法暴露给父组件
defineExpose({
  edit,
})
</script>

<style lang="scss" scoped>
.edit-drawer {
  position: relative;
  .closeable {
    @include closeable;
  }
  .uploader-wrapper1 {
    :deep(.ant-upload) {

    }
  }
}
</style>
